<template>
  <div class="college">
     <Header></Header>
    <div class="topbg"></div>
    <div class="wrap">
      <ul class="list clearfix" style="margin-top:30px">
        <li v-for="(item,index) in lists" :key="index">
          <h4>{{item.name}}</h4>
          <img :src="item.logo" alt="" />
          <p class="col9">{{item.content}}</p>
          <router-link :to="{path:'/courseDetails',query:{id:item.id,pid:pid}}" class="btn" >立即学习</router-link>
        </li>

      </ul>
      
      <div class="category clearfix">
        <div class="ty_left skew">
          <img src="@/assets/images/ty_icon.png" style="margin-right:10px;display:inline-block" alt="体验课">
          体验课
        </div>
        <div class="zb_right skew">
            <img src="@/assets/images/video.png" style="margin-right:10px;display:inline-block" alt="直播间">
          直播间
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from '@/components/layout/header.vue'
import Footer from '@/components/layout/footer.vue'
export default {
   components:{
    Header,Footer
  },
  data() {
    return {
      lists:[],
      pid:0
    }
  },
  mounted(){
   this.pid = this.$route.query.pid
   this.getData();
  },
  methods:{
    getData(){
      this.$axios.post('/api/Course/getAcademySubject',{pid:this.pid}).then(res=>{
        this.lists = res.data.data
      })
    },
  }
};
</script>

<style scoped>
.topbg {
  background: url(../../assets/images/toppic.png) no-repeat;
  background-size: cover;
  height: 379px;
  position: relative;
  z-index: 0;
}
.college .list li {
  width: 32%;
  height: 477px;
  background: #ffffff;
  box-shadow: 1px 7px 29px 0px rgba(57, 57, 57, 0.18);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  float: left;
  margin-right: 2%;
  margin-bottom: 30px;
}
.college .list li:nth-child(3n+3) {
  margin-right: 0
}
.college h4{
    font-size: 25px;
    font-weight: normal;
}
.btn {
  width: 213px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  background: #4398f8;
  opacity: 0.9;
  border-radius: 23px;
}
.category{
  position: relative;
   margin-bottom: 50px;
}
.ty_left{
  float: left;
  width: 46%;
 height: 178px;
  background: #0574B8;
  position: relative;
}
.ty_left::after,.zb_right::before{
   width: 154px;
  height: 178px;
  display: inline-block;
   position: absolute;
}
.ty_left::after{
  content: "";
  background:url(../../assets/images/left_skew.png) no-repeat;
    right: -153px;
    top: 0;
}
.skew{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 44px;
  color: #fff;
}
.zb_right{
  float: right;
  width: 47%;
 height: 178px;
  background: #FF6815;
  position: relative;
}
.zb_right::before{
  content: "";
  background:url(../../assets/images/right_skew.png) no-repeat;
  top: 0;
  left: -52px;
}
</style>